<template>
    <ul>
        <li v-for="item in items" :key="item.code">
            <div>{{item.name}}</div>
            <img v-if="item.type == 100" src= "/static/mysql.png"/>
            <img v-else-if="item.type == 101" src= "/static/sqlserver.png"/>
            <img v-else-if="item.type == 102" src= "/static/redis.png"/>
            <img v-else-if="item.type == 103" src= "/static/influxdb.png"/>
            <img v-else src= "/static/unknown.png"/>
            <p>{{item.groupName}}</p>
            <div v-if="item.status == 1" class="running">运行</div>
            <div v-else-if="item.status == 2" class="booting">启动</div>
            <div v-else class="down">未知</div>
        </li>
    </ul>
</template>

<script>
export default {
    name: "panel",
    data() {
        return {
            items: [
                {
                    code: "TAIAN_MMS",
                    name: "泰安中联生产管理系统",
                    groupId: 1,
                    groupName: "泰安中联水泥有限公司",
                    type: 1,
                    status: 1
                },
                {
                    code: "PINGYI_MMS",
                    name: "平邑中联生产管理系统",
                    groupId: 2,
                    groupName: "平邑中联水泥有限公司",
                    type: 1,
                    status: 2
                },
                {
                    code: "TAIAN_MYSQL",
                    name: "泰安中联MySQL数据库",
                    groupId: 1,
                    groupName: "山东泰安中联水泥有限公司",
                    type: 101,
                    status: 3
                },
                {
                    code: "TAIAN_MSSQL",
                    name: "泰安中联MSSQL数据库",
                    groupId: 1,
                    groupName: "山东泰安中联水泥有限公司",
                    type: 102,
                    status: 1
                },
                {
                    code: "TAIAN_REDIS",
                    name: "泰安中联Redis数据库",
                    groupId: 1,
                    groupName: "山东泰安中联水泥有限公司",
                    type: 103,
                    status: 1
                }
            ]
        };
    },
    components: {},
    props: {},
    computed: {},
    method: {}
};
</script>

<style lang="less" scoped>
ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    li {
        height: 200px;
        width: 200px;
        margin: 0 10px 10px 0;

        img {
            width: 48px;
            height: 48px;
        }
    }
}

.running {
    background: green;
    color:floralwhite;
}

.booting {
    background-color:darksalmon; 
    color:floralwhite;
}

.down {
    background: darkred;
    color:floralwhite;
}
</style>
